<!DOCTYPE html>

<html>
<head>
  <title>TypeTable.jsx</title>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <meta name="viewport" content="width=device-width, target-densitydpi=160dpi, initial-scale=1.0; maximum-scale=1.0; user-scalable=0;">
  <link rel="stylesheet" media="all" href="docco.css" />
</head>
<body>
  <div id="container">
    <div id="background"></div>
    
    <ul class="sections">
        
          <li id="title">
              <div class="annotation">
                  <h1>TypeTable.jsx</h1>
              </div>
          </li>
        
        
        
        <li id="section-1">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-1">&#182;</a>
              </div>
              
            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> React = <span class="hljs-built_in">require</span>(<span class="hljs-string">'react'</span>);
<span class="hljs-keyword">var</span> FeatureComponent = <span class="hljs-built_in">require</span>(<span class="hljs-string">'./features/featureComponent.jsx'</span>);</pre></div></div>
            
        </li>
        
        
        <li id="section-2">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-2">&#182;</a>
              </div>
              <p>Each row in the types table on the left side.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> TypeRow = React.createClass({
    getInitialState: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{</pre></div></div>
            
        </li>
        
        
        <li id="section-3">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-3">&#182;</a>
              </div>
              <p>we store the state(checked/unchecked) for every type
so that when we reload, the state restores.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>
        <span class="hljs-keyword">return</span> {
            isChecked: <span class="hljs-literal">false</span>
        };
    },
    componentDidMount: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> value = <span class="hljs-built_in">window</span>.localStorage.getItem(<span class="hljs-keyword">this</span>.props.type);
        checked = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">if</span> (value == <span class="hljs-string">"true"</span>) {
            checked = <span class="hljs-literal">true</span>;
            <span class="hljs-keyword">this</span>.props.watchTypeHandler(<span class="hljs-keyword">this</span>.props.type);
        }
        <span class="hljs-keyword">this</span>.setState({
            isChecked: checked
        });
        <span class="hljs-keyword">this</span>.props.typeInfo.typeCounter();
    },
    unwatch: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> checked = <span class="hljs-literal">false</span>;
        <span class="hljs-keyword">if</span> (<span class="hljs-keyword">this</span>.state.isChecked) {
            <span class="hljs-keyword">this</span>.props.unwatchTypeHandler(<span class="hljs-keyword">this</span>.props.type);
        } <span class="hljs-keyword">else</span> {
            checked = <span class="hljs-literal">true</span>;
            <span class="hljs-keyword">this</span>.props.watchTypeHandler(<span class="hljs-keyword">this</span>.props.type);
        }</pre></div></div>
            
        </li>
        
        
        <li id="section-4">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-4">&#182;</a>
              </div>
              <p>every time its checked we update the local storage.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre>        <span class="hljs-built_in">window</span>.localStorage.setItem(<span class="hljs-keyword">this</span>.props.type, checked);
        <span class="hljs-keyword">this</span>.setState({
            isChecked: checked
        });
    },
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">return</span> (
            <span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">li</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"theme-element checkbox"</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">input</span>
                         <span class="hljs-attr">id</span>=<span class="hljs-string">{this.props.type}</span>
                         <span class="hljs-attr">type</span>=<span class="hljs-string">"checkbox"</span>
                         <span class="hljs-attr">key</span>=<span class="hljs-string">{this.props.type}</span>
                         <span class="hljs-attr">checked</span>=<span class="hljs-string">{this.state.isChecked}</span>
                         <span class="hljs-attr">onChange</span>=<span class="hljs-string">{this.unwatch}</span>
                         <span class="hljs-attr">readOnly</span>=<span class="hljs-string">{false}</span>/&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">label</span> <span class="hljs-attr">htmlFor</span>=<span class="hljs-string">{this.props.type}</span>&gt;</span>{this.props.type}<span class="hljs-tag">&lt;/<span class="hljs-name">label</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span>
        );
    }
});

</span></pre></div></div>
            
        </li>
        
        
        <li id="section-5">
            <div class="annotation">
              
              <div class="pilwrap ">
                <a class="pilcrow" href="#section-5">&#182;</a>
              </div>
              <p>This is for the table holding the types on the
left tab.</p>

            </div>
            
            <div class="content"><div class='highlight'><pre><span class="hljs-keyword">var</span> TypeTable = React.createClass({
    render: <span class="hljs-function"><span class="hljs-keyword">function</span>(<span class="hljs-params"></span>) </span>{
        <span class="hljs-keyword">var</span> types = <span class="hljs-keyword">this</span>.props.Types;
        rowObj = [];
        appname = APPNAME;
        <span class="hljs-keyword">for</span> (<span class="hljs-keyword">var</span> type <span class="hljs-keyword">in</span> types) {
            rowObj.push(<span class="xml"><span class="hljs-tag">&lt;<span class="hljs-name">TypeRow</span>
                         <span class="hljs-attr">key</span>=<span class="hljs-string">{type}</span>
                         <span class="hljs-attr">type</span>=<span class="hljs-string">{types[type]}</span>
                         <span class="hljs-attr">unwatchTypeHandler</span>=<span class="hljs-string">{this.props.unwatchTypeHandler}</span>
                         <span class="hljs-attr">watchTypeHandler</span>=<span class="hljs-string">{this.props.watchTypeHandler}</span>
                         <span class="hljs-attr">typeInfo</span>=<span class="hljs-string">{this.props.typeInfo}</span> /&gt;</span>);
        }
        if (types.length <span class="hljs-tag">&lt; <span class="hljs-attr">1</span>) {
            <span class="hljs-attr">return</span> (
                &lt;<span class="hljs-attr">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'left-tab'</span>&gt;</span>
              <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"highlight-tip left-tip"</span>&gt;</span>
                  <span class="hljs-tag">&lt;<span class="hljs-name">strong</span>&gt;</span>No data to view!<span class="hljs-tag">&lt;/<span class="hljs-name">strong</span>&gt;</span> Insert data by following this
                  tutorial <span class="hljs-tag">&lt;<span class="hljs-name">a</span> <span class="hljs-attr">href</span>=<span class="hljs-string">"http://docs.appbase.io/scalr/rest/intro.html"</span> <span class="hljs-attr">target</span>=<span class="hljs-string">"_blank"</span>&gt;</span>here<span class="hljs-tag">&lt;/<span class="hljs-name">a</span>&gt;</span>.
              <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            );
        }
        return (
            <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'left-tab'</span>&gt;</span>
                <span class="hljs-tag">&lt;<span class="hljs-name">div</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"row typesList"</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">h4</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'types-header pull-left col-xs-12'</span>&gt;</span>
                        <span class="hljs-tag">&lt;<span class="hljs-name">span</span> <span class="hljs-attr">className</span>=<span class="hljs-string">"pull-left"</span>&gt;</span>Types<span class="hljs-tag">&lt;/<span class="hljs-name">span</span>&gt;</span>
                    <span class="hljs-tag">&lt;/<span class="hljs-name">h4</span>&gt;</span>
                    <span class="hljs-tag">&lt;<span class="hljs-name">ul</span> <span class="hljs-attr">className</span>=<span class="hljs-string">'fa-ul types-list clearfix'</span>&gt;</span>
                        {rowObj}
                    <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span>
                <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
            <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span>
        );
    }
});

module.exports = TypeTable;
</span></pre></div></div>
            
        </li>
        
    </ul>
  </div>
</body>
</html>
